<template>
	<view class="page_bg">
		<view class="item_top">
			<text class="item_type">{{qType(item.type)}}</text>
		</view>
		<mp-html class="item_body" :content="item.title"></mp-html>
		<view class="single">
			<view class="answer_item" v-for="(answer,a_index) in item.answerList" :key="item._id + a_index">
				<view class="left_icon" :class="{selected: answer.isRight}">
					{{ letter[a_index] }}
				</view>
				{{answer.content}}
			</view>
		</view>

		<view class="answer_check">
			<view class="check_title">答案解析</view>
			<view class="right_answer">正确答案：{{rightAnswer(item)}}</view>
			<mp-html class="check_detail" :content="item.analysis"></mp-html>
		</view>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				item: {},
				letter: ['A', "B", "C", "D", "E", "F", "G", "H", "I", "G", "K", "L", "M", "N", "O", "P", "Q", "R", "S",
					"T", "U", "V", 'W', "X", "Y", "Z"
				],
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		computed: {
			qType() {
				return (type) => {
					switch (type) {
						case '1':
							return '单选题'
						case '2':
							return '多选题'
						case '3':
							return '判断题'
					}
				}
			},
			rightAnswer() {
				return (item) => {
					let str = ''
					for (let k in item.answerList) {
						if (item.answerList[k].isRight) str += ` ${this.letter[k]}`
					}
					return str
				}
			}
		},
		methods: {
			// 页面数据初始化函数
			init(options) {
				this.item = vk.getStorageSync('qs-detail').questions
			},
		},
	}
</script>

<style lang="scss" scoped>
	.item_top {
		font-size: 24rpx;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx 0;

		.item_type {
			display: inline-block;
			padding: 5rpx 10rpx;
			background: linear-gradient(163deg, #FDD303 0%, #FF960C 100%);
			border-radius: 4rpx;
		}

		.number {
			color: #999999;
			display: flex;
			align-items: center;

			text {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				margin-right: 4rpx;
			}
		}
	}

	.item_body {
		font-size: 32rpx;
		line-height: 52rpx;
		color: #333333;
		padding: 28rpx 30rpx;
		min-height: 10vh;
	}

	.answer_item {
		display: flex;
		font-size: 32rpx;
		align-items: center;
		padding: 30rpx;

		.left_icon {
			width: 72rpx;
			height: 72rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2rpx solid #999999;
			border-radius: 50%;
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
			margin-right: 30rpx;
		}

		.selected {
			color: #FFFFFF;
			background: #FF960C;
			border-color: #FF960C;
			box-shadow: 0px 3rpx 6rpx rgba(255, 150, 12, 0.26);
		}
	}

	.answer_check {
		border-top: 1px solid #F0F0F0;
		padding: 40rpx 30rpx;
		margin-top: 20rpx;

		.check_title {
			font-size: 32rpx;
			font-weight: bold;
			color: #140005;
			margin-bottom: 30rpx;
		}

		.right_answer {
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
			margin-bottom: 32rpx;
		}
	}
</style>
